<template>
    <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px" >
    <!-- 首行 -->
    <tr class="title">
      <td width="50">
        <input
          type="checkbox"
          name=""
          class="choose_all"
          :checked="CheckAll"
          @change="changeAll(!CheckAll)"
        />
      </td>
      <td width="100" class="">
        <span style="margin-left: -10px">全选</span>
      </td>
      <td width="400">商品信息</td>
      <td width="150">单价（元）</td>
      <td width="150">数量</td>
      <td width="150">金额（元）</td>
      <td width="80">操作</td>
    </tr>
    <tr class="title"  v-show="!list.length">
      <slot>你好</slot>
    </tr>
    <!-- 商品具体信息 -->
    <tr class="row" v-for="item in list" :key="item.id" v-show="list.length">
      <td>
        <input
          v-model="item.isSelected"
          type="checkbox"
          name=""
          class="choose"
        />
      </td>
      <td class="tal">
        <a href="#" class="pic"><img :src="item.img" alt="" /></a>
      </td>
      <td class="tal">
        <a href="#">{{ item.name }}</a>
      </td>
      <td>
        <del class="tdl">￥{{ item.oldPrice.toFixed(2) }}</del>
        <br />
        <b class="unit">￥{{ item.price.toFixed(2) }}</b>
      </td>
      <td>
        <div class="amount">
          <a href="#" class="Increase" @click="quantity(item.id, 'add')">+</a>
          <input type="text" value="1" class="unum" v-model="item.count" />
          <a href="#" class="Reduce" @click="quantity(item.id, 'subtract')"
            >-</a
          >
        </div>
      </td>
      <td>
        <b class="u-price">￥{{ item.price * item.count }}.00</b>
      </td>
      <td><a href="#" class="btn-del" @click="delList(item.id)">删除</a></td>
    </tr>
    <tr class="count">
      <td colspan="7">
        <div class="jiesuan clearfix">
          <div class="left fl">
            <p>
              <input
                type="checkbox"
                name=""
                class="choose_all"
                :checked="CheckAll"
                @change="changeAll(!CheckAll)"
              />
              全选&nbsp;&nbsp;&nbsp;<a href="#" class="del_check"
              @click="delSelect"  v-show="conceal" >删除选中商品</a>
            </p>
          </div>
          <div class="right fr clearfix">
            <p>商品总计：￥{{ allMoney }}</p>
            <p>活动优惠：-￥{{ (allMoney - getMoney).toFixed(2) }}</p>
            <p>
              已选商品<span class="red t-number">{{ getPiece }} </span>件
              总价(不含运费、税费)：<span class="red t-price"
                >￥{{ getMoney }}</span
              >
            </p>
            <!-- <div><a href="#" class="btn pay">结算</a></div> -->
            <a href="#" class="btn pay fr">结算</a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: 'MyBody',
  props: {
    list: {
      type: Array,
      required: true,
    },
    CheckAll: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    changeAll(type) {
      this.$emit('changeAll', type)
    },
    quantity(id, type) {
      this.$emit('quantity', id, type)
    },
    delList(id) {
      this.$emit('delList', id)
    },
    delSelect(){
      this.$emit('delSelect')
    }
  },
  computed: {
    allMoney() {
      return this.list
        .filter((item) => item.isSelected)
        .reduce((req, item) => {
          return req + item.oldPrice * item.count
        }, 0)
        .toFixed(2)
    },
    getMoney() {
      return this.list
        .filter((item) => item.isSelected)
        .reduce((req, item) => {
          return req + item.price * item.count
        }, 0)
        .toFixed(2)
    },
    getPiece() {
      return this.list
        .filter((item) => item.isSelected)
        .reduce((req, item) => {
          return req + item.count
        }, 0)
    },
    conceal(){
      return this.list.some(item => item.isSelected)
    }
  },
}
</script>

<style scoped lang="less"></style>
